<template>
    <div>
        <div class="header-box mb10 flex">
            <div class="left-box flex">
                <div class="title-box">
                    <i class="el-icon-s-order"></i>
                    <span>分段成绩</span>
                </div>
            </div>
            <el-button type="text" @click="goBack">返回</el-button>
        </div>
        <el-card class="details-box mb20" shadow="never" v-if="!without">
            <el-row class="list flex">
                <el-col :span="8" class="list-li" v-for="(item,index) in list" :key="index">
                    <span class="label">分段成绩{{Number(index+1)}}：</span>
                    <span>{{item}}</span>
                </el-col>
            </el-row>
            <div class="ctime">创建时间：{{channelInfo.ctime}}</div>
        </el-card>
        <el-card v-else class="without" shadow="never">
            暂无信息
        </el-card>
    </div>

</template>
<script>
import { getTrainingGroupChannelInfo } from "@/api/training/trainingGroupChannel";
export default {
    name: "splitAchievement", // 分段成绩页面
    props: ["channelId"],
    data() {
        return {
            list: [],
            channelInfo: '',
             without:false,// 暂无信息
        }
    },
    created() {
        this.getChannelInfo()
    },
    methods: {
        // 获取航道详情
        getChannelInfo() {
            const id = this.channelId
            getTrainingGroupChannelInfo(id).then((response) => {
                this.channelInfo = response.data
                 const splitAchievement=this.channelInfo.segmentedTiming
                if(splitAchievement){
                     this.list =splitAchievement.split(" ")
                }else{
                    this.without=false
                }
            });
        },
        // 返回
        goBack() {
            this.$emit('child-event', false)
        }
    }
}
</script>
<style lang="scss" scoped>
.flex {
    display: flex;
    align-items: center;
}
.header-box {
    justify-content: space-between;
    .title-box {
        color: #409eff;
        font-size: 16px;
        margin-right: 30px;
    }
    .personBox {
        font-size: 14px;
        color: #606266;
        font-weight: 700;
        width: 380px;
        line-height: 33px;
    }
}
.details-box {
    background: #f2f6fc;
    // padding:10px 15px 5px;
    .list {
        flex-wrap: wrap;
        .list-li {
            margin: 10px 0;
            color: #666;
            .label {
                font-size: 14px;
                color: #606266;
                font-weight: bold;
            }
        }
    }
    .ctime {
        text-align: right;
        color: #999;
        margin-top: 10px;
        font-size: 14px;
    }
}
</style>